<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>require_backbone</title>
</head>
<body>
     <div id="contactapp">
         <header>
             <h1>
                 通讯录</h1>
         </header>
         <section id="main">
             <ul id="contact-list">
             </ul>
         </section>
         <div class="create">
             <!-- <input type="button" value="增加（弹出框）" id="addDia" /> -->

            <label>
                姓名：<input type="text" id="name" /></label>
            <label>
                电话：<input type="text" id="phone" /></label>
            <input type="button" value="保存" id="add" />


         </div>
     </div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
<script src="js/backbone.localStorage.js" type="text/javascript"></script>
<script type="text/javascript">
    // (function ($) {
    //     var Contact = Backbone.Model.extend({
    //         //创建一个contact对象，拥有name属性
    //         name: null,
    //         validate: function (attr) {
    //             if (!attr.name || attr.name.length > 5) {
    //                 return '姓名格式错误';
    //             }
    //         }
    //     });
    //     var ContackList = Backbone.Collection.extend({
    //         initialize: function (models, options) {
    //             //contact集合
    //             this.bind('add', options.view.addOne);
    //         }
    //     });
    //     var AppView = Backbone.View.extend({
    //         el: $('body'),
    //         initialize: function () {
    //             //实例化集合，并传入AppView对象
    //             this.contacts = new ContackList(null, { view: this });
    //         },
    //         events: {
    //             'click #addDia': 'addDia'
    //         },
    //         addDia: function () {
    //             var name = prompt('请输入姓名');
    //             var c = new Contact({ name: name });
    //             this.contacts.add(c);
    //         },
    //         addOne: function (model) {
    //             $('#contact-list').append('<li>' + model.get('name') + '</li>');
    //         }
    //     });
    //     var app = new AppView();
    // })(jQuery);


     (function ($) {
         var Contact = Backbone.Model.extend({
            initialize: function () {
                this.bind("error", function (model, error) {
                    alert(error);
                });
            },
             validate: function (attr) {
                 if (!attr.name || attr.name.length > 5) {
                     return '姓名格式错误';
                 }
             }
         });
 
         var ContackList = Backbone.Collection.extend({
             model: Contact,
             localStorage: new Store('contacts'), //所有信息保存至contacts空间下，注意此次用到了本地存储的东西
             // initialize: function (models, options) {
             //     this.bind('add', options.view.add);
             // }
         });
         var list = new ContackList();
        var ContactView = Backbone.View.extend({
            tagName: 'li',
            template: _.template('<div><%= name %>：<%= phone %><a href="javascript:;" class="delete">[删除]</a></div>'),
            events: {
                'click li': 'test',
                'click .delete': 'destroy'
            },
            initialize: function () {
                _.bindAll(this, 'render', 'remove');
                this.model.bind('change', this.render);
                this.model.bind('destroy', this.remove);
            },
            render: function () {
                var html = this.template(this.model.toJSON());
                //this.el是生成的空div
                $(this.el).html(html);
                //返回了当前视图
                return this;
            },
            destroy: function () {
                this.model.destroy();
            },
            remove: function () {
                $(this.el).remove();
            },
            test: function () {
                alert(this);
                var s = '';
            }
        });
         var AppView = Backbone.View.extend({
             el: $('body'),
             // tmplate: _.template('<li><%= name %>：<%= phone %></li>'),
 
             initialize: function () {
                 // _.bindAll(this, 'save', 'add');
                 // this.contacts = new ContackList(null, { view: this });
                 // this.list = $('#contact-list');
                 // this.name = $('#name');
                 // this.phone = $('#phone');

                this.name = this.$('#name');
                this.phone = this.$('#phone');
                this.list = this.$('#contact-list');

                _.bindAll(this, 'render', 'add', 'loadList', 'save');
                //为集合绑定事件
                list.bind('add', this.add);
                //添加修改时触发
                list.bind('refresh', this.loadList);
                list.fetch();
             },
             events: {
                 'click #add': 'save'
             },
             save: function () {
                var name = this.name.val();
                var phone = this.phone.val();
                list.create({ name: name, phone: phone });
                this.name.val('');
                this.phone.val('');
                 // var model = new Contact({ name: this.name.val(), phone: this.phone.val() });
                 // this.contacts.add(model);
             },
             loadList: function () {
                list.each(this.add);
             },
             add: function (model) {
                var view = new ContactView({ model: model });
                this.list.append(view.render().el);
                // view.model.save({ name: model.name, phone: model.phone });
                 // var obj = model.toJSON();
                 // $(this.list).append(this.tmplate(obj));
                 var s = '';
             }
         });
         var app = new AppView();
 
     })(jQuery);
</script>
</body>
</html>